import { PureComponent, useReducer, useRef } from 'react'
import { Card, Col, Row, Input, Form, Typography, Checkbox, Button, Space } from 'antd'
import React from 'react'
import cardStyle from './card.less'
import './index.less'
import FormItem from 'antd/es/form/FormItem'
import {
  UserOutlined,
  LockOutlined
} from '@ant-design/icons'
import { message } from 'antd'
import { setUserInfo } from '../../action/action'
import { connect, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router'

const { Text } = Typography

function ContentLogin () {
  const formRef = useRef(null)
  const dispatch = useDispatch()
  const navigate = useNavigate()
  // formRef = React.createRef()

  const cardHeader = () => {
    return (
      <React.Fragment>
        <Text style={{ fontSize: '20px', color: '#aaa5a5', display: 'block' }}>login</Text>
        <Text style={{ fontSize: '25px', color: '#fff' }}>账号密码登录</Text>
      </React.Fragment>
    )
  }

  const loginIn = (e) => {
    // e.preventDefault()
    formRef.current.validateFields().then(values => {
      dispatch(setUserInfo(values)).then(() => {
        navigate('/bms')
      }, (err) => {
        e.preventDefault()
        message.error('登录失败！')
      })
    })

  }

  return (
    <React.Fragment>
      <Card
        className={cardStyle.card}
        title={cardHeader()}
        bordered={true}
        style={{
          height: 450,
          width: 450,
          backgroundColor: '#fff'
        }}
      >
        <Form
          ref={formRef}
          name="normal_login"
          className="login-form"
          style={{ marginTop: '30px' }}
          // validateTrigger={['onBlur', 'onChange']}
        >
          <Row style={{ marginTop: '12px' }}>
            <Col>
              <FormItem
                label={<UserOutlined style={{ fontSize: '20px', color: '#898686' }}/>}
                name="userName"
                validateFirst={true}
                rules={[
                  { required: true, message: '账号不能为空' },
                  { max: 11, min: 1, message: '长度为1至10个字符', validateTrigger: 'onChange' }
                ]}
                initialValue={''}
                // validateTrigger={'blur'}
              >
                <Input autoComplete="off" placeholder="请输入账号"/>
              </FormItem>
            </Col>
          </Row>
          <Row style={{ marginTop: '12px' }}>
            <Col>
              <FormItem
                label={<LockOutlined style={{ fontSize: '20px', color: '#898686' }}/>}
                name="password"
                validateFirst={true}
                rules={[
                  { required: true, message: '密码不能为空' },
                  { max: 20, min: 1, message: '长度为1至20个字符', validateTrigger: 'onChange' }
                ]}
                initialValue={''}
                // validateTrigger={'onBlur'}
              >
                <Input.Password autoComplete="off" placeholder="请输入密码" visibilityToggle={false}/>
              </FormItem>
            </Col>
          </Row>
          {/*<Row style={{ marginTop: '8px' }}>*/}
          {/*  <Col>*/}
          {/*    <Space>*/}
          {/*      <Checkbox>*/}
          {/*        记住密码*/}
          {/*      </Checkbox>*/}
          {/*      <a href="">忘记密码?</a>*/}
          {/*    </Space>*/}
          {/*  </Col>*/}
          {/*</Row>*/}
          <Row style={{ marginTop: '8px' }}>
            <Col>
              {/*<NavLink to={'/bms'}>*/}
              <Button
                // htmlType="submit"
                style={{
                  width: '290px',
                  marginLeft: '63px',
                  height: '35px',
                  backgroundColor: '#1f2751',
                  fontSize: 'large',
                  color: '#e0dddd',
                  border: 'none',
                  cursor: 'pointer'
                }}
                onClick={loginIn}
              >登录</Button>
              {/*</NavLink>*/}
            </Col>
          </Row>
        </Form>
      </Card>
    </React.Fragment>
  )

}

const mapStateToProps = (state) => {return {}}
export default connect(mapStateToProps)(ContentLogin)